<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>企业材料库</title>
		<link rel="stylesheet" type="text/css" href="../css/vue.css"/>
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<link rel="stylesheet" type="text/css" href="../css/myProject.css"/>
	</head>
	<body class="myCollectionBox">
		<!--公共头部 start-->
		<div class="commonHead">
			<div class="commonHeadLeft">
				<a href="javascript:void(0);"><img src="../img/indexLogo.png" class="houseLogo"/></a>
			</div>
			<div class="commonHeadCenter">
				<ul>
					<li>
						<a class="active">项目圈</a>
					</li>
					<li>
						<a>材料数据库</a>
					</li>
					<li>
						<a>计算工具</a>
					</li>
					<li class="clear"></li>
				</ul>
			</div>
			<div class="commonHeadRight">
				<div class="infoCenter">
					<a href="javascript:void(0);">
						<span class="iconfont-tcl">&#xe643;</span>
						<span class="infoCenterText">消息中心</span>
						<span class="remindCircle"></span>
					</a>
				</div>
				<div class="loginInfo">
					<el-dropdown trigger="click">
						<span class="el-dropdown-link">
						    Kdd<i class="el-icon-caret-bottom el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
						    <el-dropdown-item>账号设置</el-dropdown-item>
						    <el-dropdown-item>退出</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
				<div class="clear"></div>
			</div>
			<div class="clear"></div>
		</div>
		<!--公共头部 end-->
		
		<!--公共侧边栏 start-->
		<div class="commonSide">
			<div class="sideTitle">项目圈</div>
			<ul class="sideMenu">
				<li>
					<a href="javascript:void(0);">
						<span class="iconfont">&#xe611;</span>
						<span>我的项目</span>
					</a>
				</li>
				<li class="active">
					<a href="javascript:void(0);">
						<span class="iconfont">&#xe60e;</span>
						<span>企业材料库</span>
					</a>
				</li>
				<li>
					<a href="javascript:void(0);">
						<span class="iconfont">&#xe610;</span>
						<span>我的收藏</span>
					</a>
				</li>
				<li>
					<a href="javascript:void(0);">
						<span class="iconfont">&#xe879;</span>
						<span>员工管理</span>
					</a>
				</li>
			</ul>
		</div>
		<!--公共侧边栏 end-->
		
		<!--内容 start-->
		<div class="content">
			<div class="contentTop">
				<div class="contentTitle">企业材料库</div>
				<a style="" class="diyMaterial" @click="dialogTableVisible1 = true">自定义材料</a>
				<div class="clear"></div>
				<el-dialog title="选择创建方式" v-model="dialogTableVisible1" class="diyMaterialModalBox">
					<div class="wid100" style="border-top: 1px solid #d9d9d9;"></div>
					<div class="diyMaterialModalBoxBottom">
						<a href="javascript:void(0);" style="border-bottom: 1px solid #d9d9d9;">在线生成</a>
						<a href="javascript:void(0);">已有报告上传</a>
					</div>
				</el-dialog>	
			</div>
			
			<!--项目圈内容 start-->
			<div class="myCollection">	
				<div class="projectBox">	
					<div class="myCollectionControl">
						<div class="selectBox">
							<label>星级</label>
							<template>
							  	<el-select v-model="level1" placeholder="星级类型">
								    <el-option
								      v-for="item in options1"
								      :key="item.value"
								      :label="item.label"
								      :value="item.value">
								    </el-option>
							  	</el-select>
							</template>
							<template>
							  	<el-select v-model="level2" placeholder="等级">
								    <el-option
								      v-for="item in options2"
								      :key="item.value"
								      :label="item.label"
								      :value="item.value">
								    </el-option>
							  	</el-select>
							</template>
							<div class="clear"></div>
						</div>
						<div class="searchBox">
							<el-input placeholder="输入关键词"></el-input>
							<button class="greenBtn searchBtn">查询</button>
							<div class="clear"></div>
						</div>
						<!--<div class="listImgControl">
							<a href="javascript:void(0);" class="iconfont active mr10">&#xe790;</a>
							<a href="javascript:void(0);" class="iconfont ">&#xe6e5;</a>
						</div>-->
						<div class="clear"></div>
					</div>
					<div class="memberList">
						<ul>
							<li class="listDec">
								<div>品牌</div>
								<div>类型</div>
								<div>图片</div>
								<div>型号</div>
								<div>甲醛</div>
								<div>TVOC</div>
								<div>苯</div>
								<div>甲苯</div>
								<div>二甲苯</div>
								<div>操作</div>
								<div class="clear"></div>
							</li>
							<ul>
								<li class="listContent" v-for="item in items">
									<div>{{item.brand}}</div>
									<div>{{item.type}}</div>
									<div><img v-bind:src="item.img"></div>
									<div>{{item.model}}</div>
									<div>{{item.jiaquan}}</div>
									<div>{{item.TOVC}}</div>
									<div>{{item.ben}}</div>
									<div>{{item.jiaben}}</div>
									<div>{{item.erjiaben}}</div>
									<div>
										<el-button type="text" @click="dialogTableVisible = true"><a href="javascript:void(0);">查看</a></el-button>
										<a href="javascript:void(0);">删除</a>
									</div>
									<div class="clear"></div>
								</li>
							</ul>
						</ul>
					</div>
					<!--分页器 start-->
					<div class="block">
						<div class="fr">
							 <span class="demonstration fl">调整每页显示条数</span>
						    <el-pagination
						      @size-change="handleSizeChange"
						      @current-change="handleCurrentChange"
						      :current-page="1"
						      :page-sizes="[10, 20, 30, 40]"
						      :page-size="10"
						      layout="sizes, prev, pager, next"
						      :total="50"
						      class="fl">
						    </el-pagination>
						    <div class="clear"></div>
						</div>
					   <div class="clear"></div>
					</div>
					<!--分页器 end-->
					
					<!--Vue模态框 start-->
					

					<el-dialog title="材料详情" v-model="dialogTableVisible">
					  	<div class="modalContentBox">
					  		<div class="modalContent">
					  			<div class="imgForm">
					  				<div class="imgBox">
					  					<img src="../img/sourceImg.jpg"/>
					  				</div>
					  				<div class="imgDec">
					  					<div class="decBox">
					  						<label>材料类别</label>
					  						<div class="dec">木地板/实木地板</div>
					  						<div class="clear"></div>
					  					</div>
					  					<div class="decBox">
					  						<label>品牌</label>
					  						<div class="dec">美宜佳</div>
					  						<div class="clear"></div>
					  					</div>
					  					<div class="decBox">
					  						<label>型号</label>
					  						<div class="dec">dt8999</div>
					  						<div class="clear"></div>
					  					</div>
					  					<div class="decBox">
					  						<label>材料类型</label>
					  						<div class="dec">干材料</div>
					  						<div class="clear"></div>
					  					</div>
					  					<div class="decBox">
					  						<label>规格</label>
					  						<div class="dec">-</div>
					  						<div class="clear"></div>
					  					</div>
					  					<div class="decBox">
					  						<label>生产商</label>
					  						<div class="dec">万科</div>
					  						<div class="clear"></div>
					  					</div>
					  					<div class="decBox">
					  						<label>生产日期</label>
					  						<div class="dec">2017-10-09</div>
					  						<div class="clear"></div>
					  					</div>
					  					<div class="decBox">
					  						<label>检测单位</label>
					  						<div class="dec">检验东莞实验室</div>
					  						<div class="clear"></div>
					  					</div>
					  				</div>
					  				<div class="clear"></div>
					  			</div>
					  			<div class="listForm">
					  				<ul class="wid100">
					  					<li class="listFormTitle">
					  						<div class="listSource">污染源</div>
					  						<div class="release">释放率(mg/m2.h)</div>
					  						<div class="releaseLevel">释放等级</div>
					  						<div class="clear"></div>
					  					</li>
					  					<li class="listFormDec" v-for="modalList in modalForm">
					  						<div class="listSource">{{modalList.source}}</div>
					  						<div class="release">{{modalList.rate}}</div>
					  						<div class="releaseLevel">{{modalList.level}}</div>
					  						<div class="clear"></div>
					  					</li>
					  				</ul>
					  			</div>
					  			<button class="greenBtn fr" @click="successful">取消收藏</button>
					  			<div class="clear"></div>
					  		</div>
					  	</div>
					</el-dialog>
					
					<!--Vue模态框 end-->
					
				</div>
				
			</div>
			<!--项目圈内容 end-->
		</div>
		<!--内容 end-->
		
	</body>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" src="../js/vueComponent.js"></script>
	<script type="text/javascript" src="../js/component.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			//获取content最小高度
			var contentMinHeight = $(window).innerHeight() - 60;
			$('.content').css('min-height',contentMinHeight + 'px');
			//获取myCollection最小高度
			var myCollectionMinHeight = $(window).innerHeight() - 150;
			$('.myCollection .projectBox').css('min-height',myCollectionMinHeight + 'px');
			
			//获取content宽度
			var contentWidth = $(window).innerWidth() - 180;
			$('.content').css('width',contentWidth + 'px');
			
			//自定义材料
			$('.diyMaterial').click(function(){
				$('.diyMaterialModalBox').show();
				$('.diyMaterialModalBoxClose').click(function(){
					$('.diyMaterialModalBox').hide();
				});
			});
		});
		
		var loginInfo = new Vue({
			el:'.loginInfo'
		});
		
		var contentTop = new Vue({
			el:'.contentTop',
			data:function(){
				return{
					dialogTableVisible1:false,
				}
			}
		});
		var myCollection = new Vue({
			el:'.myCollection',
			data:function(){
				return{
					options1: [{
			          value: '选项1',
			          label: '黄金糕'
			        }, {
			          value: '选项2',
			          label: '双皮奶'
			        }, {
			          value: '选项3',
			          label: '蚵仔煎'
			        }, {
			          value: '选项4',
			          label: '龙须面'
			        }, {
			          value: '选项5',
			          label: '北京烤鸭'
			        }],
			        level1:'',
			        options2: [{
			          value: '选项1',
			          label: '黄金糕'
			        }, {
			          value: '选项2',
			          label: '双皮奶'
			        }, {
			          value: '选项3',
			          label: '蚵仔煎'
			        }, {
			          value: '选项4',
			          label: '龙须面'
			        }, {
			          value: '选项5',
			          label: '北京烤鸭'
			        }],
			        level2:'',
			        items:[
			        	{
			        		brand:'德尔',
			        		type:'强化米地板',
			        		img:'../img/sourceImg.jpg',
			        		model:'橡木',
			        		jiaquan:'F4',
			        		TOVC:'F4',
			        		ben:'F4',
			        		jiaben:'F4',
			        		erjiaben:'F4'
			        	},
			        	{
			        		brand:'德尔',
			        		type:'强化米地板',
			        		img:'../img/sourceImg.jpg',
			        		model:'橡木',
			        		jiaquan:'F4',
			        		TOVC:'F4',
			        		ben:'F4',
			        		jiaben:'F4',
			        		erjiaben:'F4'
			        	},
			        	{
			        		brand:'德尔',
			        		type:'强化米地板',
			        		img:'../img/sourceImg.jpg',
			        		model:'橡木',
			        		jiaquan:'F4',
			        		TOVC:'F4',
			        		ben:'F4',
			        		jiaben:'F4',
			        		erjiaben:'F4'
			        	},
			        	{
			        		brand:'德尔',
			        		type:'强化米地板',
			        		img:'../img/sourceImg.jpg',
			        		model:'橡木',
			        		jiaquan:'F4',
			        		TOVC:'F4',
			        		ben:'F4',
			        		jiaben:'F4',
			        		erjiaben:'F4'
			        	},
			        ],
			        dialogTableVisible: false,
			        modalForm:[
			        	{
			        		source:'甲醛',
			        		rate:'0.5',
			        		level:'F2'
			        	},
			        	{
			        		source:'甲醛',
			        		rate:'0.5',
			        		level:'F2'
			        	},
			        ]
				}
			},
			methods:{
				handleSizeChange(val) {
			        console.log(`每页 ${val} 条`);
			    },
			    handleCurrentChange(val) {
			        this.currentPage = val;
			        console.log(`当前页: ${val}`);
			    },
			    tabHandleExchange:function(){
			    	
			    },
			    successful(){
			        this.$message({
			          	message: '取消收藏成功！',
			          	type: 'success'
			        });
			        this.dialogTableVisible = false;
			    },
			}
		});
	</script>
</html>
